<template>
  <div>
    <div v-for="(l,i) in cardList" :key="i" style="padding: 10px; font-size: 14px;">
      <el-collapse v-model="activeNames" class="collapse">
        <el-collapse-item v-if="l.cardType" :title=" getCardName(l)+':'+l.cardNo" :name="i">
          <p v-if="!l.picInfos" style="margin-top: 10px;">{{ '暂无图片附件' }}</p>
          <div v-else class="demo-image__preview">
            <el-image
              v-for="(n,m) in l.picInfos"
              :key="m"
              style=" height: 140px; margin-right: 10px;"
              :src=" n.url?`http://image.haoyunqi.com.cn/${n.url}`:''"
              :preview-src-list="l.picInfos.map(item=>`http://image.haoyunqi.com.cn/${item.url}`)"
              @click="console.log(`image.haoyunqi.com.cn/${n.url}`)"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
  import { customerAttachment } from '@/api'
  export default {
    name: 'Tab-accessory',
    props: ['csmCode', 'cardType'],
    data() {
      return {
        cardList: [],
        activeNames: []
      }
    },
    methods: {
      async getData() {
        const res = await customerAttachment({ csmCode: this.csmCode })
        this.cardList = res.data.cardItems
        this.cardList.forEach((item, index) => {
          this.activeNames.push(index)
        })
      },
      getCardName(item) {
        var obj = this.cardType.find(l => l.value === item.cardType)
        if (obj) {
          return obj.desc
        }
        return
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-collapse-item__header {
    height: 38px;
    padding-left: 10px;
    font-size: 14px;
    line-height: 38px;
    color: #38BDBD;
    border-left: 5px solid #38BDBD;
  }
</style>
